<#include "../../common/head.html"/>
<#include "../../common/left.html"/>
<#macro content>
<section class="Hui-article-box">
    <nav class="breadcrumb"><i class="Hui-iconfont"></i>
        <a href="/" class="maincolor">首页</a> <span class="c-999 en">&gt;</span>
        <span class="c-666">设备统计</span>
    </nav>
    <div class="Hui-article">
        <article class="cl pd-20">
            <div class="card-body col-md-6 float-left">
                <div id="os" style="width: 96%;height:400px;"></div>
            </div>
            <div class="card-body col-md-6 float-right">
                <div id="device" style="width: 96%;height:400px;"></div>
            </div>
        </article>
    </div>
</section>
</#macro>

<#assign css>
<style type="text/css">
    .card-body{
        padding: 0;
    }
    .card {
        display: inline-block;
        width: 100%;
    }
</style>
</#assign>

<#assign js>
<script type="text/javascript" src="/lib/echarts/echarts.min.js"></script>
<script type="text/javascript">
    var osChat = echarts.init(document.getElementById('os'));
    osOption = {
        title: {
            text: '登录用户操作系统分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '操作系统',
                type: 'pie',
                radius: '50%',
                data: ${deviceOs!},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    osChat.setOption(osOption);

    var deviceChat = echarts.init(document.getElementById('device'));
    deviceOption = {
        title: {
            text: '登录用户浏览器版本分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '浏览器版本',
                type: 'pie',
                radius: '50%',
                data: ${deviceBrower!},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    deviceChat.setOption(deviceOption);
</script>
</#assign>
<#include "../../common/layout.html"/>